<template>
  <div>
    <a-upload v-model="fileList" :customRequest="customRequest" @remove="removeFile" :maxCount="1">
      <a-button>上传文件</a-button>
    </a-upload>
    <VueOfficeDoce :src="docx" @rendered="rendered"></VueOfficeDoce>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// word预览
import VueOfficeDoce from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'

const docx = ref('')

const fileList = ref([])

const rendered = () => {
  console.log('渲染完成')
}

const customRequest = (data) => {
  const { onSuccess } = data
  const reader = new FileReader()

  reader.readAsArrayBuffer(data.file)
  reader.onload = (e) => {
    docx.value = e.target.result
    onSuccess()
  }
}

const removeFile = () => {
  fileList.value = []
  docx.value = ''
}
</script>
<style lang="">

</style>